<!--
 * @Description: 教学实施计划表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 17:15:13
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable">
      <div class="table_title">培训学员登记表</div>
      <table>
        <tr>
          <td width="15%">
            姓名
          </td>
          <td width="10%">
            <input type="text" style="width:100%" v-model="dataForm.xm" />
          </td>
          <td width="8%">
            性别
          </td>
          <td width="8%">
            <input type="text" style="width:100%" v-model="dataForm.xb" />
          </td>
          <td width="18%">
            联系电话
          </td>
          <td width="22%">
            <input type="text" style="width:100%" v-model="dataForm.lxdh" />
          </td>
          <td rowspan="5">
            1 寸 照片
          </td>
        </tr>
        <tr>
          <td>
            曾用名
          </td>
          <td>
            <input type="text" style="width:100%" v-model="dataForm.cym" />
          </td>
          <td>
            民族
          </td>
          <td>
            <input type="text" style="width:100%" v-model="dataForm.mz" />
          </td>
          <td>
            身份证号
          </td>
          <td>
            <input type="text" style="width:100%" v-model="dataForm.sfzh" />
          </td>
        </tr>
        <tr>
          <td>
            政治面貌
          </td>
          <td colspan="3">
            <input type="text" style="width:100%" v-model="dataForm.zzmm" />
          </td>
          <td>
            从事岗位
          </td>
          <td>
            <input type="text" style="width:100%" v-model="dataForm.csgw" />
          </td>
        </tr>

        <tr>
          <td>
            人员类别
          </td>
          <td colspan="5">
            <el-radio-group v-model="radio">
              <el-radio label="a">高危行业主要负责人</el-radio>
              <el-radio label="b">高危行业安管人员</el-radio>
              <el-radio label="c">特种作业人员</el-radio>
              <el-radio label="d">一般行业主要负责人</el-radio>
              <el-radio label="e">一般行业安管人员</el-radio>
              <el-radio label="f">其他从业人员</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>
            单位名称
          </td>
          <td colspan="5">
            <input type="text" style="width:100%" v-model="dataForm.dwmc" />
          </td>
        </tr>
        <tr>
          <td>
            学历
          </td>
          <td>
            <input type="text" style="width:100%" v-model="dataForm.xl" />
          </td>
          <td colspan="2">
            所学专业
          </td>
          <td>
            <input type="text" style="width:100%" v-model="dataForm.sxzy" />
          </td>
          <td>
            职务/职称
          </td>
          <td>
            <input type="text" style="width:100%" v-model="dataForm.zw" />
          </td>
        </tr>
        <tr>
          <td>
            培训类别
          </td>
          <td colspan="6">
            <el-radio-group v-model="trainingCategory">
              <el-radio label="cx">初训</el-radio>
              <el-radio label="fx">复训</el-radio>
              <el-radio label="hz">换证</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>
            详细地址
          </td>
          <td colspan="6">
            <input type="text" style="width:100%" v-model="dataForm.xxdz" />
          </td>
        </tr>
        <tr height="350px">
          <td>
            工作经历
          </td>
          <td colspan="6">
            <textarea v-model="dataForm.gzjl" style="width:100%; height:45vh" />
          </td>
        </tr>
        <tr height="200px">
          <td>
            单位审核意见
          </td>
          <td colspan="5">
            <textarea v-model="dataForm.shyj" style="width:100%; height:15vh" />
            <div class="bottom_date">
              <div>
                (单 位 盖 章)
              </div>
              <div>
                <span>日期：</span>
                <el-date-picker
                  v-model="rq"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="mini"
                  style="width:20%"
                >
                </el-date-picker>
              </div>
            </div>
          </td>
          <td>
            照片轻粘处 (1 寸彩色)
          </td>
        </tr>
      </table>

      <div class="table_bottom">注：身份证复印件粘贴在本表背面。</div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: [],
      radio: "a",
      trainingCategory: "cx",
      rq: ""
    };
  },
  created() {},
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA4/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        // console.log(this.dataForm, "res");
        this.loading = false;
      });
    },
    exportWord() {
      for (let key in this.dataForm) {
        if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm[this.radio] = "√";
      this.dataForm[this.trainingCategory] = "√";
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA4Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        // console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "培训学员登记表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "../../xy_da_classArchives/components/TABLESTYLE.scss";
// .TISchedule {
//   width: 100%;
//   height: 78vh;
//   overflow-y: auto;
//   padding-top: 10px;
//   input {
//     border: none;
//     font-size: 14px;
//   }
//   textarea {
//     border: none;
//     font-size: 14px;
//     resize: none;
//   }
//   .gaugeOutfit {
//     margin-bottom: 5px;
//   }
// }
// .mytable {
//   width: 60%;
//   //   height: 100%;
//   //   padding: 0 20px;
//   margin: 0 auto;
//   font-size: 14px;
//   .table_title {
//     width: 100%;
//     height: 40px;
//     line-height: 40px;
//     text-align: center;
//     font-size: 18px;
//     font-weight: bold;
//     margin-bottom: 10px;
//   }
//   table {
//     width: 100%;
//     border-collapse: collapse;
//     border: 1px solid #000;
//     // margin-top: 5px;
//     th {
//       border: 1px solid #000;
//       //   height: 30px;
//       text-align: left;
//       padding: 5px 10px;
//     }
//     td {
//       border: 1px solid #000;
//       //   height: 30px;
//       text-align: left;
//       padding: 5px 10px;
//       .bottom_date {
//         width: 100%;
//         // height: 40px;
//         text-align: right;
//         div {
//           margin-top: 10px;
//         }
//       }
//     }
//   }
//   .table_bottom {
//     width: 100%;
//     height: 40px;
//     line-height: 40px;
//     font-size: 15px;
//     font-weight: bold;
//     margin-top: 10px;
//   }
// }

::v-deep .el-date-editor {
  border: none;
  padding: 0;

  .el-range-input {
    text-align: center;
    width: 100px;
    color: #000;
  }

  .el-range-separator {
    line-height: 30px;
  }
}

::v-deep .el-input__inner {
  padding: 0 !important;
  border: none !important;
}

::v-deep .el-icon-date {
  display: none;
}
</style>
